<template>
  <div class="create-radio" v-if="radioInfo.count > 0">
    <home-nav :title="userInfo?.nickname + '创建的电台'" :more="false" />
    <ul>
      <li
          v-for="radio in radioInfo.djRadios"
          :key="radio.id"
          class="mt-2 mb-2 cursor-pointer grid grid-cols-3 yu-bgColor-two-hover"
          @click="jumpDjRadio(radio.id)"
      >
        <div class="flex items-center">
          <span class="w-15 h-15">
            <img class="w-full h-full" :src="radio.intervenePicUrl" alt="">
          </span>
          <span class="ml-2 yu-textColor-hover" @click="jumpDjRadio(radio.id)">{{ radio.name }}</span>
        </div>
        <span class="flex items-center yu-color-text text-sm">
          <span class="i-mdi-share m-4 text-xl yu-textColor-hover" @click.stop="shareMusicPopup(radio)"/>
          <span>订阅{{ radio.subCount }}次</span>
        </span>
        <span class="flex items-center justify-end text-sm mr-4 yu-color-text">{{ radio.programCount }}期</span>
      </li>
    </ul>
    <!-- 分享弹窗 -->
    <share-popup ref="sharepopupExamples" :sharePlayerInfo="shareMusicInfo"/>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {useStore} from "@/store/index";
import {reactive, toRefs, ref} from "vue";

// 组件
import HomeNav from '@/components/HomeNav/index.vue'

const route = useRoute()
const router = useRouter()
const store = useStore()

// 分享弹窗实例
const sharepopupExamples = ref(null)

const data = reactive({
  radioInfo: {}, // 创建电台数据
  shareMusicInfo: {} // 分享弹窗数据
})
const { radioInfo, shareMusicInfo } = toRefs(data)
// 获取用户创建的电台
store.getUserAudio(route.query.id).then(res => {
  data.radioInfo = {
    count: res.count,
    djRadios: res.djRadios,
  }
  // console.log(data.radioInfo)
})
defineProps({
  userInfo: Object
})

// 分享电台弹窗
const shareMusicPopup = (params) => {
  data.shareMusicInfo = {
    type: '电台',
    name: params.name,
    publicId: params.id,
    shareType: 'djradio' // 判断分享的是歌曲还是其他
  }
  sharepopupExamples.value.yuPopupA()
}


// 跳转到电台详情
const jumpDjRadio = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}

</script>

<style scoped>

</style>
